<template>
  <div>
  <div class="Htoel">
    <div class="header">
      <img
        src="https://source.qunarzz.com/site/images/wap/home/recommend/homebg.png"
      />
    </div>
    <nav class="iconback">
      <van-icon name="arrow-left" style="font-size: 20px" @click="fun"/>
    </nav>
    <van-tabs ref="tabs"  class="selectbox">
      <van-tab title="港澳·国内" >
    <!-- selecetnav -->
    <div class="selectnav">
      <div class="selectnavleft">北京</div>
      <div class="selectnavright" @click="location">
        <p>
          <van-icon name="aim" />
        </p>
        我的位置
      </div>
    </div>
    <!-- selectdate -->
    <div  class="selectdate" @click="showMore = true" >
      <div class="dateleft" >
        <div class="dateleftdateil">
          <span class="grey-color">今天</span>
          <span class="grey-color">入住</span>
          <div>
            <span>11月</span>
            <span>{{ date[3] }} {{date[4]}}日</span>
          </div>
        </div>
      </div>
      <span class="zhi">至</span>
      <div class="dateleftdateil">
        <span class="grey-color">明天</span>
        <span class="grey-color">离店</span>
        <div>
          <span>11月</span>
          <span>{{ date[3] }} {{date[4]}}日</span>
        </div>
      </div>
      <span class="oneNight">共一晚</span>
    </div>
    <!-- serach -->
    <div class="search">
      <input type="text" placeholder="搜索酒店名、地名、地标" v-on:click="goSearch"/>
    </div>
    <!-- searchButton -->
    <div class="searchbutton-box">
      <van-button color="#ff714a">
        <span class="searchtext">搜索</span>
      </van-button>
    </div>
    <!-- orderlink -->
    <div class="orderlink-box">
      <p>
        <van-icon name="orders-o" />
        <span @click="goOrder">我的订单</span>
        <van-icon name="arrow" />
      </p>
    </div>
      </van-tab>
      <van-tab title="海外">
    <!-- selecetnav -->
    <div class="selectnav">
      <div class="selectnavleft">旧金山</div>
      <div class="selectnavright" @click="location">
        <p>
          <van-icon name="aim" />
        </p>
        我的位置
      </div>
    </div>
    <!-- selectdate -->
    <div class="selectdate" @click="showMore = true">
      <div class="dateleft" >
        <div class="dateleftdateil">
          <span class="grey-color">今天</span>
          <span class="grey-color">入住</span>
          <div>
            <span>11月</span>
            <span>  {{ date[3] }} {{date[4]}}日</span>
          </div>
        </div>
      </div>
      <span class="zhi">至</span>
      <div class="dateleftdateil">
        <span class="grey-color">明天</span>
        <span class="grey-color">离店</span>
        <div>
          <span>11月</span>
          <span>{{date[3]}}{{date[4]}}日</span>
        </div>
      </div>
      <span class="oneNight">共一晚</span>
    </div>
    <!-- serach -->
    <div class="search">
      <input type="text" placeholder="搜索酒店名、地名、地标" v-on:click="goSearch"/>
    </div>
    <!-- searchButton -->
    <div class="searchbutton-box">
      <van-button color="#ff714a">
        <span class="searchtext">搜索</span>
      </van-button>
    </div>
    <!-- orderlink -->
    <div class="orderlink-box">
      <p>
        <van-icon name="orders-o" />
        <span>我的订单</span>
        <van-icon name="arrow" />
      </p>
    </div>
      </van-tab>
      <van-tab title="钟点房">
        <!-- selecetnav -->
    <div class="selectnav">
      <div class="selectnavleft">北京</div>
      <div class="selectnavright" @click="location">
        <p>
          <van-icon name="aim" />
        </p>
        我的位置
      </div>
    </div>
    <!-- selectdate -->
    <div class="selectdate"  @click="showSinge = true">
      <div class="dateleft">
        <div class="dateleftdateil">
          <span class="grey-color">今天</span>
          <span class="grey-color">入住</span>
          <div v-if='date.length>0'>
            <span>{{date[0]}}{{date[1]}}月</span>
            <span>{{date[3]}}{{date[4]}}日</span>
            <!-- <van-cell  :value="date"  /> -->
          </div>
          <div v-else>
            <span>11月</span>
            <span>7日</span>
            <!-- <van-cell  :value="date"  /> -->
          </div>
        </div>
      </div>

    </div>
    <!-- serach -->
    <div class="search" >
      <input type="text" placeholder="搜索酒店名、地名、地标"  v-on:click="goSearch"/>
    </div>
    <!-- searchButton -->
    <div class="searchbutton-box">
      <van-button color="#ff714a">
        <span class="searchtext">搜索</span>
      </van-button>
    </div>
    <!-- orderlink -->
    <div class="orderlink-box">
      <p>
        <van-icon name="orders-o" />
        <span>我的订单</span>
        <van-icon name="arrow" />
      </p>
    </div>
      </van-tab>
    <!-- <van-tab title="标签 4">内容 4</van-tab> -->
    </van-tabs>
    <!-- Hotelranking -->
    <div class="Hotelranking">
      <div class="rankingTitle">
        <span class="ranking">酒店排行榜</span>
        <span class="list" @click="gorank">全部榜单 <van-icon name="arrow" /></span>
      </div>
      <!-- Hotelimg -->
      <div class="Hotel-content">
        <div class="left-cloumn left-margin" >
          <div class="Htoel-card" @click="goToplist"
          v-for="item in HotelMain.HotelMaindata " :key="item.id">
            <img
              class="Hotel-img"
              :src= item.src
              alt=""
            />
            <p class="Hotel-text">{{ item.title }}</p>
          </div>
          
        </div>
        <div class="left-cloumn">
          <div class="Htoel-card" @click="goToplist"
          v-for="item in HotelMain.HotelMaindata " :key="item.id">
            <img
              class="Hotel-img"
              :src=item.src
              alt=""
            />
            <p class="Hotel-text">{{item.title}}</p>
          </div>
          
        </div>
      </div>
      <!-- allranking -->
      <button class="allorder" @click="gorank">全部榜单 <van-icon name="arrow" /></button>
      <p class="Htoel-foot">
        <van-icon class-prefix="icon" name="zhibao"/>
        全程预订保障 去哪儿都放心
      </p>
    </div>
    <!-- 日历组件总 -->
    <!-- 自定义区间日历 -->
    <van-calendar v-model="showMore" type="range" @confirm="onConfirm1" />
    <!-- 单个日历组件（钟点房使用） -->
    <van-calendar v-model="showSinge"  @confirm="onConfirm2" />
  </div>

</div>
</template>
<script>
// import loaction from "../component/loaction.vue"
import { mapState } from 'vuex';
export default {
  name: "HotelPage",
  data() {
    return {
      text:'',
      date: '',
      showSinge: false,
      showMore: false,
    };
  },
  components: {},
  mounted() {

    // 组件从隐藏状态切换到显示状态时，底部条位置错误？
    // 1 调用组件的 resize 方法来主动触发重绘：
    this.$refs.tabs.resize();

    this.$store.dispatch('chenge')
  },
  methods: {
   fun(){
      this.$route.go(-1)
   },
   location(){
    this.$router.push("/loaction")
   },
  //  单个日历组件（钟点房使用）
   formatDate(date) {
      return `${date.getMonth() + 1}/${date.getDate()}`;
    },
    onConfirm2(date) {
      this.showSinge = false;
      this.date = this.formatDate(date);
    },

  // 自定义区间日历
    formatDate(date) {
      return `${date.getMonth() + 1}/${date.getDate()}`;
    },
    onConfirm1(date) {
      const [start, end] = date;
      this.showMore = false;
      this.date = `${this.formatDate(start)} - ${this.formatDate(end)}`;
    },
    // gorank
    gorank(){
      this.$router.push("/allrank")
    },
    // goOrder
    goOrder(){
      this.$router.push("/myOrder")
    },  
    // goToplist
    goToplist(){
      this.$router.push("/Toplist")
    },  
    // goSearchpage 
    goSearch(){
      this.$router.push('/searchpage')
    }
  },
  computed:{
    ...mapState(["HotelMain"])
  },
};
</script>
<style scoped>
@import url("../../../style/base.css");
.header {
  width: 100%;
  height: 300px;
  position: relative;
}
.header img {
  width: 100%;
  height: 100%;
}
.iconback {
  position: absolute;
  left: 10px;
  top: 10px;
  color: white;
}
.selectbox {
  width: 350px;
  height: 300px;
  border: 1px solid #ccc;
  border-radius: 10px;
  /* margin: 0 auto; */
  position: absolute;
  left: 50%;
  top: 45%;
  transform: translate(-50%, -50%);
  background-color: white;
  .selectheader {
    width: 100%;
    height: 50px;
    border-bottom: 1px solid #f1f0f0;
    display: flex;
    justify-content: space-around;
    align-items: center;
    font-size: 18px;
    color: #0b0b0b;
    .haiwai {
      width: 100px;
      text-align: center;
      border-left: 1px solid #ccc;
      border-right: 1px solid #ccc;
    }
  }
  .selectnav {
    width: 100%;
    height: 50px;
    border-bottom: 1px solid #f1f0f0;
    display: flex;
    justify-content: space-around;
    align-items: center;
    font-size: 20px;
    color: #0b0b0b;

    /* padding-right: 10px; */
  }
  .selectnavleft {
    flex: 1;
    padding-left: 30px;
  }
  .selectnavright {
    /* display: flex; */
    text-align: center;
    font-size: 12px;
    padding-right: 30px;
  }
}
.selectdate {
  width: 95%;
  height: 51px;
  position: relative;
  border-bottom: 1px solid #f1f0f0;
  display: flex;
  justify-content: space-around;
  align-items: center;
  font-size: 20px;
  color: #0b0b0b;
  padding-right: 20px;
  .dateleftdateil {
    .grey-color {
      font-size: 14px;
      color: #ccc;
      padding: 2px;
    }
  }
  .zhi {
    font-size: 12px;
    align-self: end;
  }
  .oneNight {
    width: 50px;
    font-size: 12px;
    align-self: end;
  }
}
.search {
  width: 96%;
  height: 50px;
  border-bottom: 1px solid #f1f0f0;
  display: flex;
  justify-content: space-around;
  align-items: center;
  font-size: 20px;
  color: #0b0b0b;
  padding-right: 20px;
}
.search input {
  width: 100%;
  height: 50px;
  border: none;
  font-size: 16px;
  text-indent: 15px;
}
.searchbutton-box {
  width: 100%;
  height: 50px;
  text-align: center;
  margin-top: 20px;
  .van-button {
    width: 95%;
    height: 45px;
    border-radius: 20px;
    .searchtext {
      font-size: 16px;
      letter-spacing: 5px;
      color: white;
    }
  }
}
.orderlink-box {
  width: 100%;
  height: 50px;
  text-align: center;
}
.Hotelranking {
  width: 100%;
  height: 50px;
  text-align: center;
  font-size: 16px;
  color: #0b0b0b;
  position: absolute;
  bottom: 150px;
  .rankingTitle {
    display: flex;
    justify-content: space-between;
    padding-left: 10px;
    padding-right: 10px;
    .ranking {
      font-size: 20px;
    }
    .list {
      font-size: 14px;
    }
  }
}
.Hotel-content {
  width: 100%;
  display: flex;
  box-sizing: border-box;
  padding: 5px;
   .left-margin{
      margin-right: 10px;
    }
  .left-cloumn {
    width: 50%;
    -webkit-box-orient: vertical;
    -ms-flex-direction: column;
    flex-direction: column;
   
    .Htoel-card {
      width: 100%;
      margin-top: 0.2rem;
      box-shadow: 0 0 0.1rem 0 rgba(12, 41, 55, 0.15);
      border-radius: 0.4rem;
      .Hotel-img {
        width: 100%;
        height: 23.4vw;
        -o-object-fit: cover;
        object-fit: cover;
        border-radius: 0.08rem 0.08rem 0 0;
      }
      .Hotel-text {
        padding: 0.08rem 0.1rem 0;
        line-height: 3.2px;
        line-height: 0.4rem;
        font-size: 2.24px;
        font-size: 0.14rem;
        color: #000;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
    }
  }
}
.allorder{
    width: 90%;
    margin: 0 auto;
    height: 40px;
    display: flex;
    margin-top: 10px;
    justify-content: center;
    align-items: center;
    background: #f3edd3;
    border-radius:10px;
    border: none;
}
.Htoel-foot{
    display: flex;
    justify-content: center;
    align-items: center;
    line-height: 5.76px;
    line-height: .36rem;
    font-size: 2.08px;
    font-size: .13rem;
    color: #9e9e9e;
    margin-top: 10px;
}
</style>
